<template>
  <div class="home">
    <div id="map_canvas"></div>
    <div style="width: 50px;height: 52px;background-color: red;">ddddddddddddddddddddddddddddd</div>
  </div>
</template>
<script>
import { styleJson } from '../../components/mapjson/styleJson'
import { ShzzInfoList } from '@/api/index'
export default {
  name: 'Home',
  components: {},
  data(){
    return{
      map:'',
      datalistCopy:'',
      layer:'',
      infoWindow:'',
      styleJson,
      markerClusterer:'',
      data:[
        {
          lng:'116.404',
          lat:'39.915'
        },
        {
          lng:'116.304',
          lat:'39.815'
        },
        {
          lng:'116.204',
          lat:'39.855'
        },
        {
          lng:'116.454',
          lat:'39.865'
        },
        {
          lng:'116.544',
          lat:'39.885'
        },
      ]
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted(){
    this.getList()
  },
  methods:{
    getList(){
      let params = {
        model:'ShzzGetZsgyManager',
        method:'getShzzInfoList',
        xzqh:'330225',
        // startdate:this.config.startdate,
        // enddate:this.config.enddate
      }
      try{
        ShzzInfoList(params).then(res => {
          console.log(res,'中间地图-社会组织地图列表');
          let datalist = res.data.data
          this.datalistCopy = JSON.stringify(datalist)
          // 4. 准备好规范化坐标数据
          var dataaa = [];
          datalist.forEach(item => {
            dataaa.push(
              {
                geometry: {
                  type: 'Point',
                  coordinates: [ Number(item.lng), Number(item.lat) ],
                  obj:item
                }
              }
            )
          })

          console.log(dataaa,'-------------');
          // 5. 关联图层与数据，享受震撼的可视化效果
          this.layer.setData(dataaa);
        })
      }catch(err){
        console.log(err);
      }
    },
    init(){
      // 创建地图实例
      var map = new window.BMapGL.Map('map_canvas',{
        enableRotate: false, // 禁止地图旋转和倾斜可以通过配置项进行设置
        enableTilt: false
      });
      // 初始化地图，设置中心点坐标和地图级别
      var center = new window.BMapGL.Point(121.87046110537483, 29.477720199733763);
      map.centerAndZoom(center, 15);
      // 开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
      // 设置地图样式
      map.setMapStyleV2({
        styleJson:styleJson
      });
      // 设置地图旋转角度
      // map.setHeading(64.5);
      // 设置地图的倾斜角度
      // map.setTilt(73);


      // 2. 创建MapVGL图层管理器
      var view = new window.mapvgl.View({
        map: map
      });

      // 3. 创建可视化图层，并添加到图层管理器中
      this.layer = new window.mapvgl.IconLayer({
        draw: 'icon',
        width: 74,
        height: 111,
        // size:74,
        enablePicked: true, // 是否可以拾取
        // selectedIndex: -1, // 选中项
        // selectedColor: '#ff0000', // 选中项颜色
        autoSelect: false, // 根据鼠标位置来自动设置选中项
        icon: require('../../assets/images/map-icon.png'),
        onClick: e => { // 点击事件
          console.log('click', e);
          if(e.dataItem){
            var item = JSON.parse(this.datalistCopy)[e.dataIndex]
            console.log(item);
            // 添加信息窗口
            var opts = {
              width : 482, // 信息窗口宽度
              height: 874, // 信息窗口高度
              title : '' , // 信息窗口标题
              message:''
            }
            var popout = `
<style>
.map-popup{
  width: 452px;
  height: 441px;
  background: url('http://srwebapp.oss-cn-beijing.aliyuncs.com/app/xiangshan-social-organization-capital/map-popup.png') no-repeat;
  background-size: 100% 100%;
  padding: 0 18px;
  box-sizing: border-box;
}
.headline{
  font-size: 24px;
  line-height: 46px;
  font-family: YouSheBiaoTiHei;
  font-weight: normal;
  text-indent: 0em;
  color: #70DCFF;
  background: linear-gradient(0deg, #70DCFF 6.1279296875%,#F0FDFF   4443359375%);
  -webkit-background-clip: text;
}
.ellipsis{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor:pointer;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
.main{
  width: 100%;
  height:380px;
  font-size: 14px;
  margin-top: 12px;
  box-sizing: border-box;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
}
.firstLine{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left{
  display: flex;
}
.left .s1{
  width:102px;
  text-align: justify;
  margin-right: 10px;
  opacity: 0.6;
  line-height: 18px;
}
.left .s1::after{
  display: inline-block;
  width: 100%;
  content: '';
}
.left .s2{
  display: inline-block;
  line-height: 18px;
}

.right{
  display: flex;
}
.right .s1{
  width: 102px;
  text-align: justify;
  margin-right: 10px;
  opacity: 0.6;
  line-height: 18px;
}
.right .s1::after{
          display: inline-block;
          width: 100%;
          content: '';
}
.right .s2{
  display: inline-block;
  line-height: 18px;
}

.linebox{
  display: flex;
}
.linebox .s1{
        width: 110px;
        text-align: justify;
        margin-right: 10px;
        opacity: 0.6;
        line-height: 18px;
      }
.linebox .s1::after{
        display: inline-block;
        width: 100%;
        content: '';
      }
      .linebox .s2{
        width: 340px;
        line-height: 18px;
      }

</style>
<div class="map-popup">
<div class="headline">收益人数</div>
<main class="main">
  <div class="firstLine">
    <div class="left">
      <span class="s1">法定代表人</span>
      <span class="s2">${ item.legalPerson || '-' }</span>
    </div>
    <div class="right">
      <span class="s1">组织评估等级</span>
      <span class="s2">${ item.assessGrade || '-' }</span>
    </div>
  </div>
  <div class="linebox">
    <span class="s1">地址</span>
    <span class="s2">${ item.address || '-' }</span>
  </div>
  <div class="linebox">
    <span class="s1">注册资金</span>
    <span class="s2">${ Number(item.registerMoney).toFixed(2) || '-' }万元</span>
  </div>
  <div class="linebox">
    <span class="s1">组织类型</span>
    <span class="s2">${ item.type || '-' }</span>
  </div>
  <div class="linebox">
    <span class="s1">组织成立时间</span>
    <span class="s2">${ item.registerDate || '-' }</span>
  </div>
  <div class="linebox">
    <span class="s1">业务范围</span>
    <span class="s2 ellipsis">${ item.businessScope || '-' }</span>
  </div>
  <div class="linebox">
    <span class="s1">业务主管单位</span>
    <span class="s2">${ item.managerment || '-' }</span>
  </div>
  <div class="linebox">
    <span class="s1">活动地域</span>
    <span class="s2">${ item.activityArea || '-' }</span>
  </div>
  <div class="linebox">
    <span class="s1">信用代码</span>
    <span class="s2">${ item.socialCreditCode || '-' }</span>
  </div>
</main>
</div>
                `
            var infoWindow = new window.BMapGL.InfoWindow(popout, opts); // 创建信息窗口对象
            var point = new window.BMapGL.Point(item.lng, item.lat);
            map.openInfoWindow(infoWindow, point); //开启信息窗口
          }
        },
      });
      view.addLayer(this.layer);
    },
  }
}
</script>

<style lang="scss" scoped>
@function companyW($num) {
  @return ($num * 100)/1920;
}
@function companyH($num) {
  @return ($num * 100)/1080;
}
.home{
  width: 100vw;height: 100vh;
  // position: absolute;
  // top: 0;
  // left:0;
  #map_canvas {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

  /* 样式穿透 修改百度地图原有样式 */
/* 去掉百度地图logo--begin */
  ::v-deep .BMap_cpyCtrl {
      display: none;
  }
  ::v-deep .anchorBL {
      display: none;
  }
  ::v-deep .BMap_bubble_content{
    width: 469px !important;
    height: 514px !important;
  }
  // 去掉信息窗口阴影
  ::v-deep .shadow {
      display: none !important;
      div{
        img{
          width: 0 !important;
          height: 0 !important;
        }
      }
  }
}
</style>
